<template>
  <div style="color: #a8c5ed;min-width: 1920px;min-height: 1080px;">
    <div class="bgy-screen-top">
      <div class="top-left">
        <div class="top-logo"></div>
        <div class="bgy-line left"></div>
        <div class="top-logo-zhihui left" v-if="projectDetail.propertyStr === 1"></div>
        <div class="top-logo-shuz left" v-if="projectDetail.propertyStr === 2"></div>
      </div>
      <div class="top-center relative">
        <!--<zz-marquee-->
          <!--class="top-noImg-title"-->
          <!--v-if="isMarquee"-->
          <!--:marginRight=50-->
          <!--color="#b9eaf8"-->
          <!--ref="marquee"-->
          <!--fontSize="32px"-->
          <!--:contentList="projectTitleList"-->
          <!--:isStack = false-->
          <!--width="550px"></zz-marquee>-->
        <div class="top-noImg-title"><span ref="projectTitle">{{projectDetail.projectShowName}}</span></div>
        <div class="top-light"></div>
      </div>
      <div class="top-right">

        <span class="t-left mr20">
            <i class="iconfont icon-zu6" style="font-size: 23px" @click="autoHandle(false)" v-if="screenSetting.auto" title="手动播放"></i>
            <i class="iconfont icon-zu6" style="font-size: 23px" @click="autoHandle(true)" v-else title="自动轮播"></i>
        </span>

        <zz-retrieve
          :left="-204"
          :isProject = true
          :height="372"
          @show="showRetrieve"
          ref="retrieveIndex"
          fontSize="25px"
          class="mr20"
          :stage="true"
          style="margin-left: -5px; line-height: 20px;"
          :isVideoRouter="true"
          :isCompanyRouter="true"
        ></zz-retrieve>

        <!--<zz-history class="mr20"></zz-history>-->

        <span class="t-left mr20" @click="fullScreen" v-if="isFullScreen">
           <i class="iconfont icon-daquanping" title="全屏"></i>
        </span>

        <span class="t-left mr20" @click="exitScreen" v-else>
            <i class="iconfont icon-tuiquanping" title="退出全屏"></i>
          </span>

        <span class="t-left mr20" >
            <i class="iconfont icon-tuichu" @click="quit" title="退出"></i>
        </span>

      </div>
    </div>

    <!-- <div class="project-screen" :style="{height: `${contentHeight}px`}"> -->
    <div class="project-screen">
      <!-- <div class="project-screen-left" :style="{height: `${contentHeight}px`}"> -->
      <div class="project-screen-left">
        <zz-frame
          backgroundImage="/static/images/bgy-gaikuang.png"
          backgroundSize="215px"
          width="100%"
          style="overflow: hidden"
          :height="`612px`">
          <info></info>
        </zz-frame>
        <zz-frame width="100%" height="330px" style="margin-top: 10px">
          <personMonitor></personMonitor>
        </zz-frame>
      </div>
      <div class="project-screen-center">

        <zz-frame width="100%" height="70px" class="marquee-text">
          <p class="left" style="width: 130px">主席指示:</p>
          <zz-marquee class="left" :marginRight=400 ref="marquee" :contentList="content" :isStack = false width="740px"></zz-marquee>
        </zz-frame>

        <zz-frame
          width="100%"
          style="overflow: hidden"
          :padding="[0, 0, 0, 0]"
          :height="`532px`"
          class="mt10 relative">
          <div
            class="position rendering-img"
            style="width: 100%; height: 100%"
            @mouseenter="stop"
            @mouseleave="leave">
            <transition-group
              class="scroll"
              style="width: 100%; height: 100%;"
              name="list"
              tag="div">
              <img
                v-for="(item, index) in projectImages"
                v-show="(index === currentIndex) && item"
                :key="index + 1"
                :src="item"
                class="absolute"
                style="width: 100%; height: 100%; border: none;">
            </transition-group>
          </div>
          <div class="absolute rendering-top">
            <div @click="currentIndex = 0" :class="{renderingColor: currentIndex === 0}">效果图</div>
            <div @click="currentIndex = 1" :class="{renderingColor: currentIndex === 1}">规划图</div>
            <div @click="currentIndex = 2" :class="{renderingColor: currentIndex === 2}">实景图</div>
          </div>
          <div class="absolute rendering-bottom">
            <div :style="{width: `${203 * (screenStatistic.visitorNum ? 4 : 3)}px`}" style="margin: 0 auto" class="clear">
              <div class="left rendering-bottom-tip">
                <p class="rendering-blue"><zz-numberAn :number="screenStatistic.workerNum"></zz-numberAn></p>
                <p>实时在场劳务(人)</p>
              </div>
              <div class="left rendering-bottom-tip" v-if="screenStatistic.visitorNum">
                <p class="rendering-blue"><zz-numberAn :number="screenStatistic.visitorNum"></zz-numberAn></p>
                <p>今日访客(人)</p>
              </div>
              <div class="left rendering-bottom-tip">
                <p class="rendering-blue"><zz-numberAn :number="screenStatistic.deviceNum"></zz-numberAn></p>
                <p>实时在线监控设备(台)</p>
              </div>
              <div class="left rendering-bottom-tip">
                <p class="rendering-green"><zz-numberAn :number="screenStatistic.alarmNum"></zz-numberAn></p>
                <p>预防违规操作(次)</p>
              </div>
            </div>
          </div>
        </zz-frame>

        <div style="width: 100%; height: 330px; margin-top: 10px; overflow: hidden">
          <zz-frame width="49.5%" height="100%" class="left">
            <deviceMonitor></deviceMonitor>
          </zz-frame>
          <zz-frame width="49.5%" height="100%" class="left" style="margin-left: 1%">
            <environmentalMonitor></environmentalMonitor>
          </zz-frame>
        </div>

      </div>
      <div class="project-screen-right">
        <zz-frame width="100%" :height="`612px`" style="overflow: hidden">
          <warning></warning>
        </zz-frame>
        <zz-frame width="100%" height="330px" style="margin-top: 10px">
          <safety></safety>
        </zz-frame>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'zz-map',
    data () {
      return {
        projectImages: ['', '', ''],
        currentIndex: 0,
        isMarquee: false,
        projectTitleList: [],
        adminHover: true,
        isFullScreen: true,
        isActivated: false,
        screenStatistic: {
          workerNum: 0,
          visitorNum: 0,
          deviceNum: 0,
          alarmNum: 0
        },
        screenStatisticInter: null,
        projectDetail: {},
        content: [
          '把安全、质量放在首位！',
          '一切不能保证安全质量的施工都要停工！',
          '合法合规、对人好、对社会好。',
          '集团要建立安全文化，所有的行为、想法都要以安全为中心。',
          '建立一个最好的安全体系，按照追求‘零伤亡’的目标去谋划所有的事。'
        ]
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        screenSetting: 'getScreenSetting',
        incomingProjectBroadcastNode: 'incomingProjectBroadcastNode'
      })
    },
    components: {
      info (resolve) {
        require(['./info/info.vue'], resolve)
      },
      deviceMonitor (resolve) {
        require(['./deviceMonitor/deviceMonitor.vue'], resolve)
      },
      environmentalMonitor (resolve) {
        require(['./environmenta/environmentalMonitor.vue'], resolve)
      },
      personMonitor (resolve) {
        require(['./personMonitor/personMonitor.vue'], resolve)
      },
      safety (resolve) {
        require(['./safety/safety.vue'], resolve)
      },
      warning (resolve) {
        require(['./warning/warning.vue'], resolve)
      }
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid && this.$route.name === 'projectVideo') {
          this.init()
        }
      },
      incomingProjectBroadcastNode (item) {
        if (this.$route.name === 'projectVideo') {
          // this.incomingProjectNode(item)
        }
      }
    },
    mixins: [mixin],
    mounted () {
      this.getScreenStatistic()
      if (!this.screenStatisticInter) {
        this.screenStatisticInter = setInterval(() => {
          this.getScreenStatistic()
        }, 1000 * 60 * this.$pollingTime)
      }
      this.getProjectInfo()
      this.initImages()
      if (!this.projectNode) {
        this.projectNode = new this.$Node({
          group: `PROJECT_STAGE_GROUP_${this.currentUser.stageId}`,
          mName: this.currentUser.mName
        })
      }
    },
    activated () {
      if (this.isActivated) {
        this.init()
      }
      this.isActivated = true
    },
    methods: {
      init () {
        this.getScreenStatistic()
        this.getProjectInfo()
        this.emitNode()
      },
      emitNode () {
        this.projectNode.logout()
        this.projectNode.setOption({
          group: `PROJECT_STAGE_GROUP_${this.currentUser.stageId}`,
          mName: this.currentUser.mName
        })
      },
      incomingProjectNode (obj) {
        switch (obj.type) {
          // 塔机开机
          case 1:
            this.screenStatistic.deviceNum++
            break
          // 塔吊关机
          case 2:
            this.screenStatistic.deviceNum--
            break
          // 升降机开机
          case 3:
            this.screenStatistic.deviceNum++
            break
          // 升降机关机
          case 4:
            this.screenStatistic.deviceNum--
            break
          // 塔机吊次
          case 5:
            obj.status = 1
            break
          // 升降机运次
          case 6:
            obj.status = 1
            break
          // 访客到访
          case 7:
            this.screenStatistic.visitorNum++
            break
          // 塔机预警
          case 13:
            this.screenStatistic.alarmNum++
            break
          // 塔机报警
          case 14:
            this.screenStatistic.alarmNum++
            break
          // 升降机预警
          case 15:
            this.screenStatistic.alarmNum++
            break
          // 升降机报警
          case 16:
            this.screenStatistic.alarmNum++
            break
          // 环境预警
          case 17:
            this.screenStatistic.alarmNum++
            break
          // 环境报警
          case 18:
            this.screenStatistic.alarmNum++
            break
          // 人员入场
          case 19:
            this.screenStatistic.workerNum++
            break
          // 人员出场
          case 20:
            this.screenStatistic.workerNum--
            break
        }
      },
      initImages () {
        if (!this.timer) {
          this.timer = setInterval(() => {
            this.currentIndex++
            if (this.currentIndex > this.projectImages.length - 1) {
              this.currentIndex = 0
            }
          }, 1000 * 5)
        }
      },
      stop () {
        window.clearInterval(this.timer)
        this.timer = null
      },
      leave () {
        this.initImages()
      },
      fullScreen () {
        this.$fullScreen()
        this.isFullScreen = false
      },
      exitScreen () {
        this.$fullExit()
        this.isFullScreen = true
      },
      quit () {
        this.$axios({
          method: 'post',
          url: `${this.$site.passportServer}/front/logout.htm`
        }).then(res => {
          this.$store.commit('resetCurrUser')
          this.$router.push({name: 'projectLogin'})
        })
      },
      getScreenStatistic () {
        const data = {
          'pjId': this.currentUser.pjId,
          'stageId': this.currentUser.stageId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getScreenStatistic`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.screenStatistic = res.data.data
        })
      },
      getProjectInfo () {
        const data = {
          'stageId': this.currentUser.stageId,
          'pjId': this.currentUser.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getProjectInfo`,
          closeSaveRequest: true,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.projectDetail = res.data.data
          this.isMarquee = false
          this.findImgUuid()
        })
      },
      findImgUuid () {
        if (this.projectDetail.effectUuid) {
          this.$store.dispatch({
            type: 'downFile',
            fileUuid: this.projectDetail.effectUuid,
            td: 1
          }).then(res => {
            this.projectImages.splice(0, 1, res)
          })
        } else {
          this.projectImages[0] = ''
        }
        if (this.projectDetail.plabUuid) {
          this.$store.dispatch({
            type: 'downFile',
            fileUuid: this.projectDetail.plabUuid,
            td: 1
          }).then(res => {
            this.projectImages.splice(1, 1, res)
          })
        } else {
          this.projectImages[1] = ''
        }
        if (this.projectDetail.panoramicUuid) {
          this.$store.dispatch({
            type: 'downFile',
            fileUuid: this.projectDetail.panoramicUuid,
            td: 1
          }).then(res => {
            this.projectImages.splice(2, 1, res)
          })
        } else {
          this.projectImages[2] = ''
        }
      },
      initTitle () {
        let rect = this.$refs.projectTitle.getBoundingClientRect()
        if (rect.width > 550) {
          this.projectTitleList.push(`数字工地●${this.projectDetail.projectTitle}`)
          this.projectTitleList.push(`数字工地●${this.projectDetail.projectTitle}`)
          this.isMarquee = true
        } else {
          this.isMarquee = false
        }
      },
      showRetrieve () {
      },
      autoHandle (status) {
        this.$store.commit('editScreenSetting', {auto: status})
      }
    }
  }
</script>

<style lang="scss">
  .marquee-text{
    font-size: 28px;
    font-weight: bolder;
  }
  .rendering-img{
    top: 0;
    left: 0;
  }
  .rendering-top{
    top: 0;
    margin: 10px 10px;
    >div{
      background: rgba(0, 0, 0, 0.3);
      width: 100px;
      height: 36px;
      line-height: 36px;
      color: #fff;
      text-align: center;
      border-radius: 20px;
      font-weight: bolder;
      font-size: 16px;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      &:hover{
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .renderingColor {
      color: #00e8ff;
    }
  }
  .rendering-bottom{
    width: 100%;
    height: 108px;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    padding: 10px 60px;
    box-sizing: border-box;
    .rendering-bottom-tip{
      text-align: center;
      // padding-right: 60px;
      // margin-right: 60px;
      width: 203px;
      background-image: url("/static/images/line04.png");
      background-size: 1px 67px;
      background-repeat: no-repeat;
      background-position: right;
      &:last-child{
        // padding-right: 0;
        // margin-right: 0;
        background-image: none;
      }
    }
    .rendering-blue{
      margin-bottom: 5px;
      font-size: 48px;
      font-weight: bolder;
      color: #00e8ff;
      text-shadow: 0 3px 0 #2a7a5d;
    }
    .rendering-green{
      margin-bottom: 5px;
      font-size: 48px;
      font-weight: bolder;
      color: #ffc600;
      text-shadow: 0 3px 0 #a58003;
    }
  }
  .scroll{
    width: 100%;
    overflow: hidden;
    position: relative;
    >div{
      width: 100%;
      position: absolute;
    }
  }
  .list-enter-to {
    transition: all 1s ease;
    transform: translateX(0);
  }
  .list-leave-active {
    transition: all 1s ease;
    transform: translateX(-100%)
  }
  .list-enter {
    transform: translateX(100%)
  }
  .list-leave {
    transform: translateX(0)
  }
  .scroll-left{
    width: 18px;
    height: 100px;
    line-height: 100px;
    position: absolute;
    background: rgba(0,0,0, 0.5);
    left: 0;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
  }
  .scroll-right{
    width: 18px;
    height: 100px;
    line-height: 100px;
    position: absolute;
    background: rgba(0,0,0, 0.5);
    right: 0;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
  }
  .project-screen{
    height: 100%;
    min-height: 954px;
    margin-top: 10px;
    width: 100%;
    display: table;
    padding: 0 20px;
    box-sizing: border-box;
    .project-screen-left{
      padding-right: 10px;
      width: 463px;
      display: table-cell;
      vertical-align: top;
    }
    .project-screen-center{
      display: table-cell;
      vertical-align: top;
    }
    .project-screen-right{
      height: 100%;
      padding-left: 10px;
      width: 463px;
      display: table-cell;
      vertical-align: top;
    }
  }
</style>
